<template>
  <div class="atlas">
    <div class="dbr-bottom">
      <echartAtlas
        v-if="ckmData.length"
        :ckmData="ckmData"
        :detailsData="detailsData"
        @leftClickOnNode="subassemblyLeftClickOnNode"
      />
    </div>
    <div class="a-right">
      <div class="ar-top">
        <div class="art-name" v-show="activeName === 1">
          {{ detailsData.entityName }}
        </div>
        <div class="art-name" v-show="activeName === 2">
          {{ detailsData.eventName }}
        </div>
        <div class="art-image" v-show="activeName === 1">
          <img
            :src="detailsData.entityPhotoUrl || defaultImage"
            alt="暂无实体图片"
            title="实体图片"
          />
        </div>
      </div>
      <div class="ar-bottom">
        <div v-show="activeName === 1">
          <p>人物简介：</p>
          <div class="cbt-content" v-html="detailsData.entityIntro || '暂无简介'"></div>
        </div>
        <div v-show="activeName === 2">
          <p>事件描述：</p>
          <div class="cbt-content" v-html="detailsData.desc || '暂无简介'"></div>
        </div>
        <!-- <p class="jianjie">
          {{ detailsData.entityIntro || '暂无数据' }}
        </p> -->
        <div v-show="activeName === 1">
          <p>人物经历：</p>
          <div class="cbt-content" v-html="detailsData.entityExperience || '暂无简介'"></div>
        </div>
        <div v-show="activeName === 2">
          <p>事件详情：</p>
          <div class="cbt-content" v-html="detailsData.eventDetails || '暂无简介'"></div>
        </div>
        <!-- <p class="jianjie">
          {{ detailsData.entityExperience || '暂无数据' }}
        </p> -->
        <!-- <el-timeline style="min-width: 100%;padding-left: 0; ">
          <el-timeline-item timestamp="1933" placement="top">
            <el-card>
              {{ detailsData.entityExperience || '暂无数据' }}
            </el-card>
          </el-timeline-item>
        </el-timeline> -->
        <!-- <el-button @click="switchFcn" size="small">{{ switchShowText }}</el-button> -->
        <div v-show="activeName === 1">
          <p>相关资源：</p>
          <span>{{ detailsData.entityResources || '暂无数据' }}</span>
        </div>
        <!-- <el-tabs type="border-card">
          <div class="art-bottom">
            <div class="iamge-box">
              <img src="https://shadow.elemecdn.com/app/element/hamburger.9cf7b091-55e9-11e9-a976-7f4d0b07eef6.png"
                style="width: 100%" />
              <span>{{ detailsData.entityResources || '暂无数据' }}</span>
            </div>
            <div class="iamge-box">
              <img src="https://shadow.elemecdn.com/app/element/hamburger.9cf7b091-55e9-11e9-a976-7f4d0b07eef6.png"
                style="width: 100%" />
              <span>{{ detailsData.entityResources || '暂无数据' }}</span>
            </div>
            <div class="iamge-box">
              <img src="https://shadow.elemecdn.com/app/element/hamburger.9cf7b091-55e9-11e9-a976-7f4d0b07eef6.png"
                style="width: 100%" />
              <span>{{ detailsData.entityResources || '暂无数据' }}</span>
            </div>
            <div class="iamge-box">
              <img src="https://shadow.elemecdn.com/app/element/hamburger.9cf7b091-55e9-11e9-a976-7f4d0b07eef6.png"
                style="width: 100%" />
              <span>{{ detailsData.entityResources || '暂无数据' }}</span>
            </div>
          </div>
          <el-tab-pane label="图书" />
          <el-tab-pane label="音频" />
          <el-tab-pane label="视频" />
          <el-tab-pane label="期刊" />
        </el-tabs> -->
      </div>
    </div>
  </div>
</template>
<script lang="tsx" setup>
import { useRouter, useRoute } from 'vue-router'
import * as FormApi from '@/api/knowledge/character'
import echartAtlas from './echartAtlas.vue'
import { useAppStore } from '@/store/modules/app'
// import defaultImage from '@/assets/imgs/defaultImage3.png'
import defaultImage from '@/assets/imgs/defaultImage.png'
import { getGraphEventById } from '@/api/knowledge/character'
const appStore = useAppStore()
appStore.setFooter(false)
const router = useRouter()
const route = useRoute()
// const activeName = ref(route.query.tabsType === "人物图谱" ? 1 : 2)
const activeName = ref(route.query.tabsType === '1' ? 1 : 2)
// 展开收缩状态
const switchShow = ref<Boolean>(true)
// 展开收缩文本
const switchShowText = ref<String>('展开')
const switchFcn = () => {
  console.log(switchShow.value)
  switchShow.value = !switchShow.value
  switchShowText.value = switchShow.value ? '展开' : '收起'
}
const subassemblyLeftClickOnNode = (value) => {
  const params = {
    entityName: value,
    graphId: route.query.graphId
  }
  FormApi.getGraphEntityByName(params).then((res) => Object.assign(detailsData, res))
}
// 详细信息数据
const detailsData = reactive([])
// 基本信息接口数据
const getData = () => {
  if (activeName.value === 1) {
    FormApi.getGraphEntity({ id: route.query.entityId }).then((res) => {
      Object.assign(detailsData, res)
      getTableData()
    })
  } else if (activeName.value === 2) {
    FormApi.getGraphEventById({ id: route.query.entityId }).then((res) => {
      Object.assign(detailsData, res)
      getTableData()
    })
  }
}
onMounted(() => {
  getData()
})
const ckmData = reactive([])
var numberOfCycles = 0 // forEach循环次数
const getTableData = async () => {
  let params
  if (activeName.value === 1) {
    params = {
      entity: detailsData.entityName,
      graphName: detailsData.graphName
    }
  } else if (activeName.value === 2) {
    params = {
      entity: detailsData.eventName,
      graphName: detailsData.graphName
    }
  }
  await FormApi.findNeo4jByEntity(params).then((res) => {
    res.forEach((item, index) => {
      const params2 = {
        entityName: item.endEntity,
        graphId: route.query.graphId
      }
      FormApi.getGraphEntityByName(params2)
        .then((res2) => (item.asdf = res2))
        .finally(() => {
          ++numberOfCycles
          if (numberOfCycles === res.length) Object.assign(ckmData, res)
        })
    })
  })
}
</script>
<style lang="scss" scoped>
.atlas {
  //background-image: url('@/assets/imgs/echartAtlasBackgroundImages.png');
  background-image: url('@/assets/imgs/neweChartAtlasBackgroundImages6.png');
  background-size: 100%;
  background-repeat: no-repeat;
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  display: flex;
  justify-content: center;
  align-items: stretch;

  .dbr-bottom {
    width: 80%;
    // height: 100vh;
    // height: 100vh;
    flex: 1;
    // overflow: auto; // 显示滚动条，根据内容决定是否显示
    height: calc(100vh - 35px - 50px);
  }

  .a-right {
    padding: 15px;
    // position: relative;
    // float: right;
    position: fixed;
    right: 0;
    background-color: #203065;
    color: hsla(0, 0%, 100%, 0.8);
    width: 20%;
    height: 100vh;
    overflow: auto; // 显示滚动条，根据内容决定是否显示
    /* 隐藏默认的滚动条样式 */
    scrollbar-width: none; // Firefox
    -ms-overflow-style: none; // IE and Edge

    .ar-top {
      display: flex;
      justify-content: space-around;
      align-items: center;

      .art-name {
        font-size: 20px;
      }

      .art-image {
        img {
          width: 150px;
          // height: 200px;
        }
      }
    }

    .ar-bottom {
      padding-bottom: 150px;
      font-size: 16px;
      position: relative;

      .jianjie {
        cursor: pointer;
        font-family: PingFangSC-Regular;
        font-size: 14px;
        font-weight: 400;
        letter-spacing: 0;
        line-height: 22px;
      }

      .art-bottom {
        display: flex;
        justify-content: flex-start;

        .iamge-box {
          width: 150px;
          margin-right: 20px;
          text-align: center;
        }
      }

      .el-button {
        position: absolute;
        right: 0;
        bottom: 266px;
      }
    }
  }
}
</style>
